<template>
  <div class="ele-body">
    <el-card shadow="never">
      <ele-split-layout width="266px" allow-collapse :right-style="{ overflow: 'hidden' }" >
        <!-- 表格 -->
        <ele-pro-table ref="table" :columns="columns" :datasource="datasource" height="calc(100vh - 265px)" full-height="calc(100vh - 116px)"
          :need-page="false" :toolkit="[]" :current.sync="current" highlight-current-row
          class="dict-table" tool-class="ele-toolbar-actions" @done="done">
          <!-- 表头工具栏 -->
          <template slot="toolbar">
            <div style="margin: 5px 0">
              <el-input clearable size="small" placeholder="请输入..." style="width:150px"  v-model="where.key" />
              <el-button size="small" type="primary"  icon="el-icon-search" class="ele-btn-icon" style="float:right" @click="search" >查询</el-button>
            </div>
          </template>
        </ele-pro-table>
        <template slot="content">
          <!-- 数据字典项列表 -->
          <dict-data v-if="current" :parentId="current.id" :parentName="current.name" :parentCode="current.code" />
        </template>
      </ele-split-layout>
    </el-card>
  </div>
</template>

<script>
  import DictData from './components/dict-data';
  import { QueryAllParentDictView } from '@/api/systemmanager/dictionarymanager';

  export default {
    name: 'SystemDictionary',
    components: { DictData },
    data() {
      return {
        // 表格列配置
        columns: [
          {
            columnKey: 'index',
            type: 'index',
            width: 60,
            align: 'center',
            showOverflowTooltip: true,
            label:'序号',
          },
          {
            prop: 'name',
            label: '字典名称',
            showOverflowTooltip: true
          }
        ],
        // 当前编辑数据
        current: null,
        // 是否显示编辑弹窗
        showEdit: false,
        // 编辑回显数据
        editData: null,
        //搜索对像
        where:{key:'',parentId:''},
      };
    },
    methods: {
      /* 表格数据源 */
      datasource(params) {
        let queryParams = {
            key:'',
            parentId:'',
        }
        if(params.where!=null && params.where.key!=null){
          queryParams.key = params.where.key;
        }

        return QueryAllParentDictView(queryParams);
      },
      /* 表格渲染完成回调 */
      done(res) {
        if (res.data?.length) {
          this.$refs.table.setCurrentRow(res.data[0]);
        }
      },
      /* 刷新表格 */
      reload() {
         // 编辑弹窗编辑完成后 done 事件回传表单数据，使用 Object.assign 赋值给 current 即可修改表格的行数据
         if(this.current) {
            Object.assign(this.current, data);
          }
      },
      /* 刷新表格 */
      search(){
        this.$refs.table.reload({ where: {key:this.where.key} });
      },
    }
  };
</script>

<style scoped>
  .dict-table ::v-deep .el-table__row {
    cursor: pointer;
  }

  .dict-table ::v-deep .el-table__row > td:last-child:after {
    content: '\e6e0';
    font-family: element-icons !important;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1;
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -7px;
  }

  .dict-table ::v-deep .el-table__row > td:last-child .cell {
    padding-right: 20px;
  }
</style>
